<template>
	<view>
		<view class="map" id="myMapView" ref="myElement" :style="{'height': dynamicStyle}" />
		<view class="legend" @click="showLegend = !showLegend" v-show="$store.state.user.route != 'pages/Land/details'">
			<view class="legendText" v-show="!showLegend">
				例
			</view>
			<view v-show="showLegend">
				<image v-show="isOrigin" class="uimg" :src="legendImg?legendImg[0].url:''" mode=""></image>
				<image v-show="!isOrigin" class="uimg" :src="legendImg?legendImg[1].url:''" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script module="myMapViews" lang="renderjs">
	import {
		initMap,
		TabsBaseMaps,
		Tools
	} from "@/utils/initMap.js"
	import {
		getFeatureLayerUrl,
		getLegend,
		getServiceCode
	} from "@/api/land.js"
	import config from "@/config.js"
	// import "@arcgis/core/assets/esri/themes/light/main.css";
	export default {
		name: 'Map',
		data() {
			return {
				myMapObject: {},
				map: null,
				mapView: null,
				layersData: "",
				dynamicStyle: '',
				legendImg: '',
				isOrigin: false,
				showLegend: true
			}
		},
		props: ['detailsHide', 'confirmPage'],
		async mounted() {

			// getFeatureLayerUrl().then(res => {
			// 	// console.log(res.data[0].legend)
			// 	// console.log(config.baseUrl + res.data[0].legend)
			// 	// this.legendImg = config.baseUrl + res.data[0].legend
			// })
			const serviceCode = await getServiceCode()
			getLegend(serviceCode.msg).then(res => {
				console.log(res.data, '55555')
				this.legendImg = res.data.map((item, index) => {
					return {
						url: config.baseUrl + item.url
					}
				})
			})


			if (!this.detailsHide && this.confirmPage) return this.dynamicStyle = window.innerHeight - 150 + 'px'
			this.dynamicStyle = window.innerHeight + 'px'


		},
		watch: {
			detailsHide(newVal, oldVal) {
				if (!newVal) return this.dynamicStyle = window.innerHeight - 150 + 'px'
				this.dynamicStyle = window.innerHeight + 'px'
			}
		},
		// mounted() {
		// 	// console.log('2222')

		// },
		methods: {
			int(url) {
				return new Promise(async (resolve, reject) => {
					await initMap(url)
					const _this = this
					resolve()
					setTimeout(() => {
						console.log('222')
						_this.$emit('show')
					}, 1000)

					Tools.view.watch('zoom', zoomVal => {

						if (zoomVal > config.appParams.mapParams.judgeZoom) {
							// this.legendImg = '@/static/legend/图例.png'
							this.isOrigin = true
						} else {
							// this.legendImg = '@/static/legend/图例1.png'
							this.isOrigin = false
						}
					})
				})
			},
			tabs(type) {
				TabsBaseMaps(type)
			},
		},

	}
</script>

<style>
	::v-deep .esri-view-surface.esri-view-surface--touch-none:focus::after {
		outline: none !important;
	}

	/deep/.esri-widget--button {
		display: none;
	}

	/deep/.esri-attribution__powered-by {
		display: none;
	}

	/deep/.esri-view .esri-view-surface--inset-outline:focus::after {
		outline: none;
	}

	/deep/.esri-component {
		display: none;
	}

	.map {
		width: 100%;
		transition: all .5s;
		position: relative;
		/* height: calc(100vh - 44px); */
		/* background-color: rgb(34 50 74); */
	}

	.uimg {
		width: 70px;
		height: 141px;
	}

	.legend {
		position: absolute;
		bottom: 5rem;
		right: 3%;
		/* z-index: 1; */



		.legendText {
			background-color: #ffffff;
			padding: 8px 10px;
			color: #3c9cff;
			border-radius: 8px;
			box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);
			font-size: 14px;
		}
	}

	::v-deep .esri-component {
		display: block;
	}

	::v-deep h3.esri-widget__heading {
		display: none;
	}
</style>